@keyframes fn {
  0% {
    transform: rotateX(-6deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(-6deg) rotateY(360deg);
  }
}
@keyframes change {
  0% {
    transform: rotateY(0deg);
  }
  10% {
    transform: rotateY(0deg);
  }
  20% {
    transform: rotateY(72deg);
  }
  30% {
    transform: rotateY(72deg);
  }
  40% {
    transform: rotateY(144deg);
  }
  50% {
    transform: rotateY(144deg);
  }
  60% {
    transform: rotateY(216deg);
  }
  70% {
    transform: rotateY(216deg);
  }
  80% {
    transform: rotateY(288deg);
  }
  90% {
    transform: rotateY(288deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes card1 {
  0% {
    transform: rotateY(0deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
  16.66% {
    transform: rotateY(0deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
  33.33% {
    transform: rotateY(30deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
  49.99% {
    transform: rotateY(30deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
  66.59% {
    transform: rotateY(15deg) translateZ(300px);
    opacity: 1;
    z-index: 9;
  }
  83.24% {
    transform: rotateY(15deg) translateZ(300px);
    opacity: 1;
    z-index: 9;
  }
  100% {
    transform: rotateY(0deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
}
@keyframes card2 {
  0% {
    transform: rotateY(30deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
  16.66% {
    transform: rotateY(30deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
  33.33% {
    transform: rotateY(15deg) translateZ(300px);
    opacity: 1;
    z-index: 9;
  }
  49.99% {
    transform: rotateY(15deg) translateZ(300px);
    opacity: 1;
    z-index: 9;
  }
  66.59% {
    transform: rotateY(0deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
  83.24% {
    transform: rotateY(0deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
  100% {
    transform: rotateY(30deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
}
@keyframes card3 {
  0% {
    transform: rotateY(15deg) translateZ(300px);
    opacity: 1;
    z-index: 9;
  }
  16.66% {
    transform: rotateY(15deg) translateZ(300px);
    opacity: 1;
    z-index: 9;
  }
  33.33% {
    transform: rotateY(0deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
  49.99% {
    transform: rotateY(0deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
  66.59% {
    transform: rotateY(30deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
  83.24% {
    transform: rotateY(30deg) translateZ(300px);
    opacity: 0.3;
    z-index: 0;
  }
  100% {
    transform: rotateY(15deg) translateZ(300px);
    opacity: 1;
    z-index: 9;
  }
}
@keyframes big {
  0% {
    background-size: 40%;
    transform: rotate(360deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  }
  50% {
    background-size: 30%;
    transform: rotate(0deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  }
  100% {
    background-size: 40%;
    transform: rotate(360deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  }
}
